@use 'sass:map';
@use '@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;

$typography: map.get(gio.$mat-theme, typography);

.quick-filters {
  display: flex;
  flex-direction: column;

  background-color: mat.get-color-from-palette(gio.$mat-basic-palette, white);
  padding: 16px 24px;
  border-bottom: 1px solid mat.get-color-from-palette(gio.$mat-dove-palette, darker10);

  &__row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  &__selectors {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  &__plans {
    padding: 0;
    margin-right: 16px;
  }

  &__period,
  &__methods {
    display: inline;
    width: 132px;
    padding: 0;
    margin-right: 16px;
  }

  .action {
    // here we align the padding and margin of the button to angular mat-form-fields
    padding-bottom: 1.34em;
    margin: 0.25em 0;

    &__button {
      height: 48px;
      margin-right: 16px;
      mat-icon {
        margin-right: 4px;
      }
    }
  }

  &__chip {
    background-color: mat.get-color-from-palette(gio.$mat-dove-palette, darker10);
    color: mat.get-color-from-palette(gio.$mat-dove-palette, darker10-contrast);

    &__key {
      @include mat.typography-level($typography, body-2);
    }

    &__value {
      @include mat.typography-level($typography, subtitle-2);
      margin-left: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 150px;
    }
  }

  .mat-mdc-standard-chip {
    min-height: 24px;
    height: 24px;
  }

  &__applied {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  &__reset {
    margin-left: 12px;
  }
}
